<template>
  <view class="my">
    <view class="my-center" :style="[ `padding-top: ${capSuleStyle.capSuleTop}px`]">
      <view class="my-user-name" :style="[`height: ${capSuleStyle.capSuleHeihgt}px`, `line-height: ${capSuleStyle.capSuleHeihgt}px`,`margin-bottom: ${capSuleStyle.capSuleTop}rpx`]" @click="showLogin = true">
        <image class="user-img" src="../static/cart_empty@2x.png" mode="aspectFit"></image>
        <text class="user-name">我的名称</text>
      </view>
      <view class="my-center-info">
        <view class="my-wrap">
          <view class="coupon">
            <text>2</text>
            <text class="title">优惠券</text>
          </view>
          <view class="wallet">
            <text>0.00</text>
            <text class="title">红包(元)</text>
          </view>
        </view>
      </view>
      <view class="my-goods-info">
       <view class="payment">
         <icon class="iconfont icon-a-baoxiao1"></icon>
         <text>待支付</text>
       </view>
       <view class="pickup">
         <icon class="iconfont icon-a-chucha1"></icon>
         <text>待取货</text>
       </view>
       <view class="evaluate">
         <icon class="iconfont icon-a-weituo1"></icon>
         <text>待评价</text>
       </view>
       <view class="refund">
         <icon class="iconfont icon-shezhi07"></icon>
         <text>退款/售后</text>
       </view>
       <view class="separate-box">
         <i class="arrow"></i>
       </view>
       <view class="all-goods">
         <icon class="iconfont icon-a-caigou6"></icon>
         <text>全部订单</text>
       </view>
      </view>
      <view class="recommend-goods">
        <view class="recommend-title">
          <text class="title">商品推荐</text>
          <text class="more">查看更多></text>
        </view>
        <view class="recommend-goods-item">
          <good-item v-for="(item,index) in goodsList" :key="index" :goodsItem="item"></good-item>
        </view>
      </view>
    </view>
    <my-login @showValue="showLoginFrame" v-if="showLogin"></my-login>
  </view>
</template>

<script setup>
 import { onMounted, reactive, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 
 onMounted(() => {
   capSule()
   getRecommendGoods()
   getUserProfile()
 })
 
 const userInfo = reactive({}) // 获取用户信息
 const hasUserInfo = ref(false) // 判断用户是否登录了
 const canIUseGetUserProfile = ref(false) // 判断是否成功获取到配置
 onLoad(() => {
   if (wx.getUserProfile) {
        canIUseGetUserProfile.value = true
    }
 })
 // 登录操作，获取用户信息
 const getUserProfile = () => {
    wx.getUserProfile({
         desc: '用于完善会员资料',
         success:(res) => {
             console.log(res);
             userInfo.value = res.userInfo,
             hasUserInfo.value = true
         }
       })
 }
 
 // 顶部胶囊样式
 const capSuleStyle = reactive({
   capSuleTop: '',
   capSuleWidth: '',
   capSuleHeihgt: '',
   capSuleLeft: '',
   capSuleRight: '',
   capSuleBottom: ''
 })

 // 获取顶部胶囊样式
 const capSule = () => {
   const but_data = wx.getMenuButtonBoundingClientRect()
   capSuleStyle.capSuleTop = but_data.top
   capSuleStyle.capSuleWidth = but_data.width
   capSuleStyle.capSuleHeihgt = but_data.height
   capSuleStyle.capSuleLeft = but_data.left
   capSuleStyle.capSuleRight = but_data.right
   capSuleStyle.capSuleBottom = but_data.bottom
 }
 
 // 定期获取推荐商品的参数
 const queryObj = reactive({
   query: '',
   cid: Math.floor(Math.random()*10+1).toString(),
   pagenum: 1,
   pagesize: 10
 })
 const goodsList = ref([])
 // 获取推荐商品列表
 const getRecommendGoods = async (cid) => {
   const {data} = await uni.$http.get('/api/public/v1/goods/search', {queryObj})
   if(data.meta.status !== 200) return uni.$showMsg()
   goodsList.value = data.message.goods
 }
 
 const showLogin = ref(true)
 const showLoginFrame = (event) => {
   showLogin.value = event
 }

</script>

<style lang="scss">
.my {
  background: linear-gradient(
  to top,
  rgba(87, 218, 102, 0) 0,
  rgba(87, 218, 102, 0.2) 25%,
  rgba(87, 218, 102, 0.5) 50%,
  rgba(87, 218, 102, 0.8) 75%,
  rgba(87, 218, 102, 1) 100%
  );
  padding: 0 15rpx;
  .my-center {
    .my-user-name {
      display: flex;
      .user-img {
        margin: 0 20rpx;
      }
      .user-name {
        font-family: Microsoft YaHei;
        font-size: 36rpx;
        font-weight: 500;
      }
    }
    .my-center-info {
      height: 150rpx;
      width: 100%;
      background-color: #fff;
      border-radius: 30rpx;
      .my-wrap {
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .wallet, .coupon {
          width: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          .title {
            color: #999;
          }
        }
        .coupon {
          border-right: 1rpx solid #999;
        }
      }
    }
    .my-goods-info {
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 130rpx;
      background-color: #fff;
      border-radius: 30rpx;
      margin-top: 20rpx;
      .payment,.pickup,.evaluate,.refund, .all-goods {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 25rpx;
        .iconfont {
          font-size: 50rpx;
          color: #999;
          margin-bottom: 6rpx;
        }
      }
      .separate-box {
        position: absolute;
        right: 155rpx;
        top: 50%;
        transform: translateY(-50%);
        height: 90%;
        width: 7rpx;
        border-radius: 4rpx;
        background-color: #f5f5ff;
        .arrow {
          display: block;
          margin: 20px auto;
          width: 0;
          height: 0;
          border:20rpx solid transparent;
          border-left-color:#f5f5ff;
        }
      }
    }
    .recommend-goods {
      .recommend-title {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0;
        font-size: 30rpx;
        color: #333;
      }
      .recommend-goods-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .goods-item {
          margin-bottom: 20rpx;
          border-radius: 20rpx;
          box-shadow: 0 0 5rpx #999;
        } 
      }
    }
  }
}
.user-img {
  width: 60rpx;
  height: 60rpx;
}
</style>
